var $ = layui.jquery
var layer = layui.layer
$("button").click(add);
var laytpl = layui.laytpl
var laydate = layui.laydate
var id =1;
function add(){
	layer.open({
		type:1,
		content:$("#testa").html(),//通过模板的方式定义出来弹出层显示的内容，也可以通过标签拼接的方式。
		area:["400px","300px"],
		title:"添加信息",
		success:function(){//成功打开弹出层后的操作
			$("input[value='确定']").click(testAdd);//给弹出层中的确定按钮添加监听事件
			$("input[value='关闭']").click(testClose);//给弹出层中的关闭按钮添加监听事件
			renderDate("birth")
		}
	});
}

function testAdd(){
	var name = $("input[name='name1']").val();//获取弹出层的姓名输入框的数据
	var age = $("input[name='age']").val();//获取弹出层年龄输入框的数据
	var birth = $("input[name='birth']").val();
	var data = {id:id,name:name,age:age,birth:birth}//使用模板的方式将数据封装
	var html = $("#tradd").html();//获得定义的模板
	var temp = laytpl(html).render(data);//将封装的数据填充到模板中
	$("#tbody").append(temp);//将填充完数据的模板追加到表格中
	id++;//每次添加一个用户，id++
	testClose();//点击完确定，添加完成后弹出层关闭
}
function testClose(){
	layer.close(layer.index);
}

function del(id){
	layer.confirm("请确定是否删除？",function(index){
		$("#tr"+id).remove();
		layer.close(index)
	})
}
//点击修改，数据回显
function upd(id){
	layer.open({
		type:1,
		content:$("#testa").html(),//弹出层显示的内容，这里直接调用之前定义的模板
		title:"修改信息",
		area:["400px","300px"],
		success:function(){
			$("input[value='确定']").click({id:id},testSave);//给弹出层中的确定按钮添加监听事件
			$("input[value='关闭']").click(testClose);//给弹出层中的关闭按钮添加监听事件
			var name = $("#tdb"+id).text();//获取原单元格中的姓名
			var age = $("#tdc"+id).text();//获取原单元格中的年龄
			var birth = $("#tdd"+id).text();
			$("input[name='name1']").val(name)//将获取到的姓名填充到弹出层的姓名输入框
			$("input[name='age']").val(age)//将获取到的年龄填充到弹出层的年龄输入框
			$("input[name='birth']").val(birth);
			renderDate("birth")
		}
	})
	
}
//数据保存
function testSave(event){
	var id = event.data.id;
	$("#tdb"+id).html($("input[name='name1']").val())//将弹出层的姓名输入框的内容保存到原来的单元格，使用html()方法
	$("#tdc"+id).html($("input[name='age']").val())//将弹出层的年龄输入框的内容保存到原来的单元格，使用html()方法
	$("#tdd"+id).html($("input[name='birth']").val())
	testClose()//修改完成后弹出层关闭
}

$("input[value = '搜索']").click(sel)//给value值为搜索的input标签绑定事件
function sel(){
	$("tbody tr").css("background","");//每次点击先把单元格的样式清除
	var val = $("input[name='name2']").val();//获取搜索框的输入内容
	// console.log(val)
	if(val==''){//如果输入框的内容为空，直接返回
		return;
	}
	//遍历每一行单元格
	$("tbody tr").each(function(){
		//如果当前行的tdb单元格的内容和上面获取的搜索输入框的内容符合搜索条件
		if($(this).find("td[id^='tdb']").text().indexOf(val)>-1){
			//则修改这一行的样式为红色，表示搜索到这一行
			$(this).css("background","red");
		}
	})
}
function renderDate(id){
	laydate.render({
		elem:"#"+id,
		type:"date"
	});
}